<template>
  <div class="right-boxs" :style="{ background: colorList5[store.styleInfo.colorType - 1].fontColor }"></div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { pathList, pathListLoop } from '../index';
import iconTab from './iconTab.vue';
import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue';
import { settings } from '@/api/project/project';
import { colorList5 } from '../../data';
import { useProjectStore } from '@/store';
import { useRouter, useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';

const router = useRouter();
const route = useRoute();
const store = useProjectStore();
const { tabvalue } = storeToRefs(store);
const tabList = ref([
  { name: '展品图库', isShow: true, id: 1 },
  { name: '文创商品', isShow: true, id: 4 },
  { name: '版权声明', isShow: true, id: 5 },
  { name: '学术研究', isShow: true, id: 3 },
  { name: '留言板', isShow: true, id: 2 },
]);

// initSetting();

watch(
  () => tabvalue,
  () => {
    initSetting();
  },
  { deep: true },
);
</script>

<style lang="less" scoped>
.right-boxs {
  // position: fixed;
  // top: 280px;
  // right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 72px;
  max-height: 530px;
  background: #cbb995;
  box-shadow: -4px 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  z-index: -1;
}
.btm-item {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 32px;
  padding: 20px 0;
  border-top: 1px solid #443c2e;
  span {
    text-align: center;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 20px;
  }
}
.btm-icon {
  display: flex;
  justify-content: center;
  width: 100%;
}
.btm-item-null {
  margin-left: 0px;
  border-top: none;
}
</style>
